import BorderlessButton from "@/src/components/borderless-button"
import { PageWarpperContext } from "@/src/components/page-warpper"
import { PureStandardProps } from "@/src/consts"
import { UserState } from "@/src/dva/models/user"
import { State } from "@/src/dva/state"
import Global from "@/src/lib/global"
import { Image, Text, View } from "@tarojs/components"
import { useContext } from "react"
import { connect } from "react-redux"

import "./vip-section.scss"

interface VIPSectionProps extends PureStandardProps {
    score?: number
    couponNum?: number,
    vipTitle?: string
    user:  UserState,
    
}

interface ItemProps {
    number: number
    desc: string
    onClick: () => void
}

const Item = (props: ItemProps) => {

    return (
        <View className="vip-section-content-item" onClick={ props.onClick }>
            <Text>{ props.number }</Text>
            <Text>{ props.desc }</Text>
        </View>
    )
}


const VIPSection = (props: VIPSectionProps) => {
    let ctx = useContext(PageWarpperContext)
    const isLogin=()=>{
        if (!props.user.isLogin) {
            ctx.loginCompentRef?.current?.show()
            return false
        }else{
            return true
        }
    }
     
    let couponItemClick = () => {
        console.log('isLogin',isLogin())
        if(!isLogin()){
            return
        }
        Global.navigateTo("/pages/discount/index", {
            package: "subpackages"
        })
    }

    let scoreItemClick = () => {
        if(!isLogin()){
            return
        }
        Global.navigateTo("/pages/score/index", {
            package: "subpackages"
        })
    }
    
    const goToMember=()=>{
        if(!isLogin()){
            return
        }
        Global.navigateTo("/pages/member/index", {
            package: "subpackages"
        })
    }

    return (
        <View {...props} className={ [props.className, "vip-section"].join(" ") }>
            <Image className="vip-section-bg"  src={ Global.loadImage("bg_vip_section@3x.png") }/>

            <View className="vip-section-title-container" onClick={goToMember}>
                <Text className="vip-section-title">{ props.vipTitle }</Text>
                <BorderlessButton className="vip-section-btn" backgroundImage="btn_vip_center@3x.png" />
            </View>

            <View className="vip-section-content">
                <Item number={ props.couponNum ?? 0} desc="优惠劵（张）" onClick={ couponItemClick }/>
                <Item number={ props.score ?? 0 } desc="会员积分" onClick={ scoreItemClick }/>
            </View>
        </View>
    )
}

export default connect((state:State)=>{
    return{
        user:state.user
    }
})(VIPSection)